<template>
  <div class="regionBox">
    <span v-for="(item, index) in Props.defaultItem" :key="item.id" :class="item.titleClass">
      <div class="itemBox">
        <el-checkbox :label="item.coding" v-model="item.checkAll" style="font-weight:600,color:#000;"
          :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item, $event)">{{ item.areaName
          }} </el-checkbox>
        <el-icon class="btnHidden" @click="showNextChild(item, $event)"
          v-if="item.childrenList.length > 0 && item.titleType > 0">
          <ArrowDownBold v-if="item.childrenList.length > 0 && item.isShow" />
          <ArrowUpBold v-if="item.childrenList.length > 0 && !item.isShow" />
        </el-icon>
      </div>

      <el-checkbox-group v-model="item.chosedArr" @change="handleCheckChange(item)" v-if="item.isShow">
        <AreaList v-if="item.childrenList.length > 0" :defaultItem="item.childrenList" :dataAll="Props.dataAll">
        </AreaList>
      </el-checkbox-group>
    </span>
  </div>
</template>
<!-- 省市区组件 -->
<script lang="ts" setup>
import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue'

const Props: any = defineProps({
  defaultItem: {
    type: Array,
    default: []
  },
  dataAll: {
    type: Array,
    default: []
  },
})
const handleCheckAllChange = (item: any, e: any) => {
  item.checkAll = e
  item.chosedArr = e ? JSON.parse(JSON.stringify(item.allArr)) : []
  item.isIndeterminate = false
  // 有下级去处理下级
  if (item.childrenList.length > 0) {
    findChildren(item.childrenList, e)
  }
  // 处理上级
  if (item.parentId !== 0) {
    findParent(Props.dataAll, item.parentId)
  }

}
const handleCheckChange = (val: any) => {
  const length = val.childrenList.length
  let checkedLength = 0
  val.childrenList.forEach((options: any) => {
    if (options.checkAll) {
      checkedLength++
    }
  })
  val.checkAll = checkedLength === length
  val.isIndeterminate = checkedLength > 0 && checkedLength < length
  // 处理上级
  if (val.parentId !== 0) {
    findParent(Props.dataAll, val.parentId)
  }
}
const findChildren = (list: any, e: any) => {
  //console.log(list);

  list.forEach((child: any) => {
    child.chosedArr = e ? JSON.parse(JSON.stringify(child.allArr)) : []
    child.isIndeterminate = false
    child.checkAll = e
    child.childrenList.forEach((options: any) => {
      options.checkAll = e
      if (child.childrenList.length > 0) {
        findChildren(child.childrenList, e)
      }
    })
  })
}
const findParent = (list: any, parentId: any) => {
  list.forEach((result: any) => {
    let parentCheckedLength = 0
    let parentIndeterminateLength = 0
    if (result.coding === parentId) {
      result.chosedArr = []
      result.childrenList.forEach((item: any) => {
        if (item.isIndeterminate) {
          parentIndeterminateLength++
        } else if (item.checkAll) {
          parentCheckedLength++
          result.chosedArr.push(item.coding)
        }
      })
      result.checkAll = parentCheckedLength === result.allArr.length
      result.isIndeterminate = (parentIndeterminateLength > 0 || parentCheckedLength > 0) && parentCheckedLength < result.allArr.length
      if (result.parentId !== 0) {
        findParent(Props.dataAll, result.parentId)
      }
    } else if (result.childrenList.length > 0) {
      findParent(result.childrenList, parentId)
    }
  })
}
const showNextChild = (item: any, e: any) => {
  console.log(item);
  let  str = item.isShow
  Props.dataAll.map((i: any) => {
    i.childrenList.length > 0 && i.childrenList.map((child: any) => {
      let arr = child.isShow
      child.isShow = false
      child.childrenList.length > 0 && child.childrenList.map((son: any) => {
        son.isShow = false
        if (item.level == 2) {
          if (child.coding == item.parentId) {
            child.isShow = true
          }
          son.childrenList.length > 0 && son.childrenList.map((children: any) => {
            children.isShow = false
          })
        }
      })
    })
  })
  item.isShow = !str

}
</script>

<style lang='scss' scoped>
.contentr {
  background: #fff;
}

.regionBox ::v-deep .el-checkbox {
  margin-right: 0;
}

.btnHidden {
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 14px;
  cursor: pointer;
}

.titleClass0 {
  display: block;
  width: 100%;
  text-align: left;
}

.titleClass0 ::v-deep(.el-checkbox__label) {
  color: #000;
  font-weight: 600;
}

.titleClass1 ::v-deep(.el-checkbox__label),
.titleClass2 ::v-deep(.el-checkbox__label) {
  color: #606266;
  font-weight: 400;
}

.titleClass1 .el-checkbox-group {
  width: 92%;
  background: #efefef;
  margin: 0 auto;
  padding: 10px 20px  10px 0px;
}

.titleClass2 .el-checkbox-group {
  width: 86%;
  background: #fefa8380;
  margin: 0 auto;
  padding: 10px 20px  10px -10px;
}

.titleClass3 .el-checkbox {
  margin-left: 20px;
}

.titleClass3 {
  display: inline-block;
}
.itemBox{
  display:inline-block;
  margin-left:20px;
}
</style>

